<!--
 * @author: 十一
 * @since: 2024-05-29
 * index.vue
 * @desc: new page
-->
<template>
  <a-card>
    <a-form layout="inline" :model="formState">
      <a-form-item label="影片">
        <a-input v-model:value="formState.user" placeholder="搜索影片"> </a-input>
      </a-form-item>
      <a-form-item label="影投">
        <a-select v-model:value="formState.password" style="width: 183px" placeholder="选择影投">
          <a-select-option value="lucy">Lucy</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="条件">
        <a-select v-model:value="formState.password" style="width: 183px" placeholder="选择条件">
          <a-select-option value="lucy">Lucy</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="省份">
        <a-select v-model:value="formState.password" style="width: 183px" placeholder="选择条件">
          <a-select-option value="lucy">Lucy</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="城市">
        <a-input v-model:value="formState.password" placeholder="搜索城市"> </a-input>
      </a-form-item>
      <a-form-item label="影院">
        <a-input v-model:value="formState.password" placeholder="搜索影院"> </a-input>
      </a-form-item>
      <a-form-item label="价格">
        <a-space>
          <a-input-number v-model:value="formState.user" style="width: 81px" prefix="￥" /> -
          <a-input-number
            v-model:value="formState.user"
            :min="0"
            :max="100"
            style="width: 81px"
            prefix="￥"
          />
        </a-space>
      </a-form-item>
      <a-form-item label="影厅">
        <a-select v-model:value="formState.password" style="width: 183px" placeholder="选择条件">
          <a-select-option value="lucy">Lucy</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button type="primary">搜索</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>重置</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const formState = reactive({
  user: '',
  password: ''
})
</script>

<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 15px;
}
</style>
